<!-- 设备基本状态 -->
<!-- 设备基本信息 -->
<template>
  <div class="w-100 h-100">
    <div style="height: 80%; width: 100%">
      <div
        id="glsbjbxx"
        class="w-100"
        style="height: 100%; position: relative"
      ></div>
    </div>

    <div style="height: 20%; width: 100%">
      <el-row>
        <el-col :span="12" v-for="(item, index) in arr" :key="index">
          <fakeLenfend
            style="width: 100%; height: 90%; justify-content: center"
            :color="[item.itemStyle.color]"
            :text="[item.name + ' ' + item.value + '个']"
            :value="[((item.value/allCount)*100).toFixed(2) + '%']"
          >
          </fakeLenfend>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import fakeLenfend from "@/components/project/fakeLegend.vue";
import { useConvert } from "@/hook/useConvert";

const list = [
  { name: "一级缺陷", itemStyle: { color: "#00BCFD" } },
  { name: "二级缺陷", itemStyle: { color: "#39DBDD" } },
  { name: "三级缺陷", itemStyle: { color: "#F26C47" } },
  { name: "四级缺陷", itemStyle: { color: "#CF6EEF" } },
];

function getOption(list: any) {
  const option = useConvert().getPie3D(list, 0.7, 150);
  option.tooltip = {
    backgroundColor: "rgba(255,255,255,0.75)",
    extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
    textStyle: {
      fontSize: 14,
      color: "#000",
    },
    formatter: params => {
      if (params.seriesName !== 'mouseoutSeries') {
        return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}`;
      }
    }
  },
  delete option.graphic;
  option.title.text = "";
  return option;
}


let myChart: any;

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.yxjk.szgwqxqk;
  } catch (error) {}

  return data;
});

const arr = ref([]);
const allCount = ref(0);

watch(
  () => current.value,
  (val) => {
    if (val) {
      allCount.value = val.reduce((pre: number, cur: number) => pre + cur);

      arr.value = val.map((value: any, index: number) => ({
        ...list[index],
        value: value,
      }));
      const option = getOption(arr.value);
      myChart.setOption(option);
    }
  }
);

onMounted(() => {
  myChart = echarts.init(document.getElementById("glsbjbxx") as HTMLElement);
});
</script>

<style></style>
